<template>
  <n-grid cols="24" item-responsive responsive="screen">
    <n-grid-item offset="0 s:0 m:2 l:3 xl:3 2xl:3" span="24 s:24 m:20 l:18 xl:18 2xl:18">
      <n-card :bordered="false">
        <div>
          <n-space justify="space-between">
            <span>{{ markdownFileData.name }}</span>
          </n-space>
        </div>
        <n-divider />
        <v-md-editor :model-value="text" mode="preview"
                     @image-click="imageClickHandler"
        ></v-md-editor>
        <n-back-top :right="40" />
      </n-card>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { markdownCommonInfo } from "@/api/worker/fileSystem";
import { useRouter, useRoute } from 'vue-router';
import { ResultEnum } from "@/enums/httpEnum";
import { api as viewerApi } from "v-viewer";

const router = useRouter();
const route = useRoute();

const text = ref('')
const markdownFileData = ref({
  id: '',
  identifier: '',
  dirId: '',
  name: '',
  content: '### :warning:该文件不存在, 请关闭后重新预览:warning:',
})

onMounted(async () => {
  const params = route.params
  if (params.id) {
    // @ts-ignore
    const { code, data } = await markdownCommonInfo(params.id)
    if (code === ResultEnum.SUCCESS) {
      markdownFileData.value = data
      text.value = data.content
    } else {
      text.value = markdownFileData.value.content
    }
  }
})

const imageClickHandler = (images, currentIndex) => {
  // images: 当前md文件中的所有图片地址
  // currentIndex: 当前点击的图片的索引
  viewerApi({
    images: images,
    options: {
      toolbar: true,
      initialViewIndex: currentIndex
    },
  })
}
</script>

<style scoped>

</style>
